<!--设备选择组件-->
<template>
    <div class="page-box">
      <el-row class="page-box-item">
        <el-col :span="4" style="padding-left: 5px; padding-right: 5px;">
          <el-card shadow="never">
            <el-input v-model="filterText" style="width:160px" placeholder="请输入类型名称"></el-input>
            <el-tree :data="treeData" v-loading="isLoadingTree" :props="defaultProps" @node-click="treeClick"
              :filter-node-method="filterNode" ref="tree"></el-tree>
          </el-card>
        </el-col>
        <el-col :span="20" style="padding-left: 5px; padding-right: 5px;">
          <div class="page-search">
            <div>
              <label>设备编码</label>
              <el-input v-model="searchForm.MachineryCode" style="width:160px" placeholder="请输入设备编码"></el-input>
            </div>
            <div>
              <label>设备名称</label>
              <el-input v-model="searchForm.MachineryName" style="width:160px" placeholder="请输入设备名称"></el-input>
            </div>
            <div>
              <label>设备状态</label>
              <el-input v-model="searchForm.Status" style="width:160px" placeholder="请输入设备状态"></el-input>
            </div>
  
            <div>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </div>
          <div class="page-section">
            <!--表单-->
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)" row-key="Id">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column fixed prop="MachineryCode" label="设备编码" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="MachineryName" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="MachineryTypeName" label="所属分类" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="WorkshopName" label="所属车间" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="Status" label="设备状态" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="Location" label="位置" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="PurchasingTime" label="购买日期" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="MachinerySpec" label="型号" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="Capacity" label="产能" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="Updater" label="修改人" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="UpdateTime" label="修改日期" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="操作" :show-overflow-tooltip="true" width="120">
                <template slot-scope="scope">
                  <el-button type="text" @click="Checked(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
              :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
          </div>
        </el-col>
      </el-row>
  
    </div>
  </template>
  <script>
  import Pagination from '@/components/Pagination.vue'
  export default {
    components: {
      Pagination
    },
    mounted() {
      this.dataBind()
      this.GetMachineryType()
  
      window.addEventListener('resize', () => {
        if (this.$refs.dataForm)
          this.$refs.dataForm.doLayout();
      })
    },
    destroyed() {
      window.removeEventListener('resize', () => { });
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    data() {
      return {
        filterText: '',
        //搜索字段
        searchForm: {
          MachineryCode: '',
          MachineryName: '',
          Status: '',
          MachineryTypeId: -1
        },
        pageDomain: {
          PageIndex: 1,
          PageSize: 10,
          TotalCount: 0
        },
        tableData: [],
        isLoading: false,
        isLoadingTree: false,
        //树形数据
        treeData: [],
        defaultProps: {
          children: 'Children',
          label: 'MachineryTypeName'
        }
      }
    },
    methods: {
      //选择按钮
      Checked(model){
        this.$emit('callback',model)
      },
      //搜索按钮
      search() {
        this.pageDomain.PageIndex = 1
        this.dataBind()
      },
      //重置按钮
      reset() {
        this.searchForm.MachineryCode = ''
        this.searchForm.MachineryName = ''
        this.searchForm.Status = ''
        this.searchForm.MachineryTypeId = -1
      },
      //分页方法
      handleSizeChange(val) {
        this.pageDomain.PageIndex = 1;
        this.pageDomain.PageSize = val;
        this.dataBind();
      },
      handleCurrentChange(val) {
        this.pageDomain.PageIndex = val;
        this.dataBind();
      },
      //点击树形数据时
      treeClick(data) {
        this.searchForm.MachineryTypeId = data.Id
        this.dataBind()
        console.log(data);
  
      },
      //获取数据
      dataBind() {
        this.isLoading = true
        this.$http.get('/api/Machinery',
          {
            params: {
              PageIndex: this.pageDomain.PageIndex,
              PageSize: this.pageDomain.PageSize,
              MachineryTypeName: this.searchForm.MachineryTypeName,
              MachineryCode: this.searchForm.MachineryCode,
              MachineryName: this.searchForm.MachineryName,
              Status: this.searchForm.Status,
              MachineryTypeId: this.searchForm.MachineryTypeId
            }
          })
          .then(res => {
            this.tableData = res.Data
            this.pageDomain.TotalCount = res.Count
            this.isLoading = false
          })
      },
      //获取树形数据
      GetMachineryType() {
        this.isloadingTree = true
        this.$http.get('/api/MachineryType/GetAll', {
          params: {
            MachineryTypeCode: '',
            MachineryTypeName: '',
          }
        })
          .then((res) => {
            this.treeData = res.Data;
            this.isloadingTree = false;
            this.treeData.unshift({ Id: -1, MachineryTypeName: '全部' })
          })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.MachineryTypeName.indexOf(value) !== 1
      }
  
    }
  }
  </script>
  <style scoped></style>